<template>
  <div style="width: 100%; height: 100%; display: flex; flex-direction: column">
    <div style="font-size: 20px; color: white; width: 100%; text-align: left">
      添加节目单
    </div>
    <div
      style="
        width: 100%;
        flex: 1;
        margin-top: 10px;
        border-radius: 10px;
        background: #1c1c1c;
        border: solid 2px #404040;
        display: flex;
        flex-direction: column;
        align-items: center;
      "
    >
      <div
        style="
          width: 100%;
          height: 50px;
          background: #383f3d;
          border-radius: 10px 10px 0 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <div
          style="
            display: flex;
            align-items: center;
            color: #878888;
            cursor: pointer;
          "
        >
          <div>《</div>
          <div style="margin-left: 10px">返回</div>
        </div>
        <div style="color: #fcfcfc">添加计划节目单</div>
        <div
          style="
            display: flex;
            align-items: center;
            color: #878888;
            cursor: pointer;
          "
        >
          <img
            src="../assets/refresh.png"
            style="width: 15px; height: 15px"
            alt=""
          />
          <div style="margin-left: 10px">刷新</div>
        </div>
      </div>
      <div
        style="
          width: 100%;
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
        "
      >
        <!-- <div
          style="width: 85%; display: flex; align-items: center; margin: 20px 0"
        >
          <div style="width: 120px; text-align: right; color: #cecece">
            计划节目单名称
          </div>
          <div
            style="
              margin-left: 10px;
              flex: 1;
              height: 40px;
              background: #303030;
              border: solid 1px #2e3d37;
              border-radius: 10px;
            "
          >
            <input
              type="text"
              style="
                width: calc(100% - 20px);
                height: 100%;
                background: transparent;
                border: 0;
                outline: 0;
                color: #adbab6;
              "
            />
          </div>
        </div> -->
        <div
          style="width: 85%; display: flex; align-items: center; margin: 20px 0"
        >
          <div style="width: 120px; text-align: right; color: #cecece">
            选择节目单
          </div>
          <div
            style="
              margin-left: 10px;
              flex: 1;
              height: 40px;
              background: #303030;
              border: solid 1px #2e3d37;
              border-radius: 10px;
            "
          >
            <!-- <input
              type="text"
              style="
                width: calc(100% - 20px);
                height: 100%;
                background: transparent;
                border: 0;
                outline: 0;
                color: #adbab6;
              "
            /> -->
            <select
              v-model="planForm.pl_id"
              style="
                width: calc(100% - 20px);
                height: 100%;
                background: transparent;
                border: 0;
                outline: 0;
                color: #adbab6;
              "
            >
              <option
                v-for="(item, index) in programList"
                :key="index"
                :value="item.id"
              >
                {{ item.program_name }}
              </option>
            </select>
          </div>
        </div>
        <!-- <div style="width: 85%; display: flex; margin: 20px 0">
          <div style="width: 120px; text-align: right; color: #cecece">
            选择资源
          </div>
          <div
            style="
              margin-left: 10px;
              flex: 1;
              height: 400px;
              background: #303030;
              border: solid 1px #2e3d37;
              border-radius: 10px;
              display: flex;
              align-items: center;
            "
          >
            <div
              style="
                flex: 1;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <div
                style="
                  width: 80%;
                  height: 80%;
                  background: #000000;
                  margin: 50px 0;
                  border-radius: 20px;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  overflow: auto;
                  -ms-overflow-style: none;
                  scrollbar-width: none;
                "
              >
                <div
                  style="
                    width: 80%;
                    display: flex;
                    align-items: center;
                    margin-top: 20px;
                  "
                >
                  <div style="color: #b3b3b3">选择资源：</div>
                  <div
                    style="
                      flex-shrink: 0;
                      height: 40px;
                      flex: 1;
                      background: #252424;

                      border-radius: 20px;
                      display: flex;
                      align-items: center;
                    "
                  >
                    <img
                      src="../assets/search.png"
                      style="width: 15px; height: 15px; margin-left: 20px"
                      alt=""
                    />
                    <input
                      v-model="searchForVideoList"
                      type="text"
                      style="
                        background: transparent;
                        border: 0;
                        outline: 0;
                        color: white;
                        margin-left: 10px;
                      "
                    />
                  </div>
                </div>
                <div
                  style="
                    display: flex;
                    align-items: center;
                    color: #e0e0e0;
                    width: 70%;
                    margin-top: 10px;
                    flex-shrink: 0;
                  "
                >
                  <input
                    type="checkbox"
                    v-model="selectAll"
                    @input="changeSelectAll"
                  />
                  <div style="flex: 1; text-align: left; margin-left: 10px">
                    全选
                  </div>
                </div>
                <div
                  v-for="(item, index) in videoList"
                  :key="index"
                  style="
                    display: flex;
                    align-items: center;
                    color: #e0e0e0;
                    width: 70%;
                    margin-top: 10px;
                    flex-shrink: 0;
                  "
                >
                  <input
                    type="checkbox"
                    v-model="item.selected"
                    @input="changeSelect(index)"
                  />
                  <div style="flex: 1; text-align: left; margin-left: 10px">
                    {{ item.videoName }}
                  </div>
                </div>
              </div>
            </div>
            <div
              style="
                flex: 1;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <div
                style="
                  width: 80%;
                  height: 80%;
                  background: #000000;
                  margin: 50px 0;
                  border-radius: 20px;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  overflow: auto;
                  -ms-overflow-style: none;
                  scrollbar-width: none;
                "
              >
                <div
                  style="
                    width: 80%;
                    display: flex;
                    align-items: center;
                    margin-top: 20px;
                  "
                >
                  <div style="color: #b3b3b3">已选择：</div>
                  <div
                    style="
                      flex-shrink: 0;
                      height: 40px;
                      flex: 1;
                      background: #252424;

                      border-radius: 20px;
                      display: flex;
                      align-items: center;
                    "
                  >
                    <img
                      src="../assets/search.png"
                      style="width: 15px; height: 15px; margin-left: 20px"
                      alt=""
                    />
                    <input
                      v-model="searchForSelectedVideos"
                      type="text"
                      style="
                        background: transparent;
                        border: 0;
                        outline: 0;
                        color: white;
                        margin-left: 10px;
                      "
                    />
                  </div>
                </div>

                <draggable
                  v-model="selectedVideoList"
                  handle=".drag-handle"
                  style="
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                  "
                >
                  <div
                    v-for="(item, index) in selectedVideoList"
                    :key="index"
                    style="
                      display: flex;
                      align-items: center;
                      color: #e0e0e0;
                      width: 70%;
                      margin-top: 10px;
                      flex-shrink: 0;
                      justify-content: space-between;
                    "
                  >
                    <div style="flex: 1; text-align: left; margin-left: 10px">
                      {{ item.videoName }}
                    </div>
                    <div style="display: flex; align-items: center">
                      <img
                        class="drag-handle"
                        src="../assets/order.png"
                        style="width: 15px; height: 15px; cursor: pointer"
                        alt=""
                      />
                      <img
                        @click="deleteVideoInSelectedVideos(index)"
                        src="../assets/删除.png"
                        style="
                          width: 15px;
                          height: 15px;
                          margin-left: 20px;
                          cursor: pointer;
                        "
                        alt=""
                      />
                    </div>
                  </div>
                </draggable>
              </div>
            </div>
          </div>
        </div> -->
        <div
          style="width: 85%; display: flex; align-items: center; margin: 20px 0"
        >
          <div style="width: 120px; text-align: right; color: #cecece">
            计划类型
          </div>
          <div
            style="
              margin-left: 10px;
              flex: 1;
              height: 40px;
              background: #303030;
              border: solid 1px #2e3d37;
              border-radius: 10px;
            "
          >
            <select
              v-model="planForm.freq"
              @change="changePlanType"
              style="
                width: calc(100% - 20px);
                height: 100%;
                background: transparent;
                border: 0;
                outline: 0;
                color: #adbab6;
              "
            >
              <option :value="0">单次</option>
              <option :value="1">每日</option>
              <option :value="2">每周</option>
            </select>
          </div>
        </div>
        <div
          style="width: 85%; display: flex; align-items: center; margin: 20px 0"
        >
          <div style="flex: 1; display: flex; align-items: center">
            <div style="width: 120px; text-align: right; color: #cecece">
              计划日期
            </div>
            <div
              v-if="planForm.freq == '0'"
              style="
                margin-left: 10px;
                flex: 1;
                height: 40px;
                background: #303030;
                border: solid 1px #2e3d37;
                border-radius: 10px;
              "
            >
              <input
                v-model="planForm.days"
                type="date"
                style="
                  width: calc(100% - 20px);
                  height: 100%;
                  background: transparent;
                  border: 0;
                  outline: 0;
                  color: #adbab6;
                "
              />
            </div>
            <div
              v-if="planForm.freq == '1'"
              style="
                margin-left: 10px;
                flex: 1;
                height: 40px;
                background: #303030;
                border: solid 1px #2e3d37;
                border-radius: 10px;
              "
            >
              <input
                disabled
                placeholder="/"
                style="
                  width: calc(100% - 20px);
                  height: 100%;
                  background: transparent;
                  border: 0;
                  outline: 0;
                  color: #adbab6;
                "
              />
            </div>
            <div
              v-if="planForm.freq == '2'"
              style="
                margin-left: 10px;
                flex: 1;
                height: 40px;
                background: #303030;
                border: solid 1px #2e3d37;
                border-radius: 10px;
              "
            >
              <select
                v-model="planForm.days"
                style="
                  width: calc(100% - 20px);
                  height: 100%;
                  background: transparent;
                  border: 0;
                  outline: 0;
                  color: #adbab6;
                "
              >
                <option value="1">周一</option>
                <option value="2">周二</option>
                <option value="3">周三</option>
                <option value="4">周四</option>
                <option value="5">周五</option>
                <option value="6">周六</option>
                <option value="0">周日</option>
              </select>
            </div>
          </div>
          <div style="flex: 1; display: flex; align-items: center">
            <div style="width: 120px; text-align: right; color: #cecece">
              启动时间
            </div>
            <div
              style="
                margin-left: 10px;
                flex: 1;
                height: 40px;
                background: #303030;
                border: solid 1px #2e3d37;
                border-radius: 10px;
              "
            >
              <input
                v-model="planForm.time"
                type="time"
                style="
                  width: calc(100% - 20px);
                  height: 100%;
                  background: transparent;
                  border: 0;
                  outline: 0;
                  color: #adbab6;
                "
              />
            </div>
          </div>
        </div>
         <div
          style="width: 85%; display: flex; align-items: center; margin: 20px 0"
        >
         <div style="flex: 1; display: flex; align-items: center">
            <div style="width: 120px; text-align: right; color: #cecece">
             结束时间
            </div>
            <div
              style="
                margin-left: 10px;
                flex: 1;
                height: 40px;
                background: #303030;
                border: solid 1px #2e3d37;
                border-radius: 10px;
              "
            >
              <input
                v-model="planForm.endTime"
                type="time"
                style="
                  width: calc(100% - 20px);
                  height: 100%;
                  background: transparent;
                  border: 0;
                  outline: 0;
                  color: #adbab6;
                "
              />
            </div>
          </div>
        </div>
        <div
          style="
            width: 85%;
            display: flex;
            align-items: center;
            justify-content: center;
          "
        >
          <button
            @click="submitPlan"
            style="
              background: #33a681;
              color: #bad3cb;
              width: 100px;
              height: 40px;
            "
          >
            确定
          </button>
          <button
            style="
              background: #3a3a39;
              color: #bad3cb;
              width: 100px;
              height: 40px;
              margin-left: 10px;
            "
          >
            取消
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../axios/request";
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  data() {
    return {
      selectAll: false,
      videoList: [],
      selectedVideoList: [],
      searchForVideoList: null,
      searchForSelectedVideos: null,
      planForm: {
        freq: null,
        time: null,
        days: null,
        pl_id: null,
        cmd: 0,
        enabled: 1,
        endTime:null,
      },
      programList: [],
    };
  },
  methods: {
    async submitPlan() {
      let res = await request({
        url: "/plan/api/addPlan/" + localStorage.getItem("user_name"),
        method: "POST",
        data: this.planForm,
      });

      console.log(this.planForm);
    },
    async getProgramList() {
      let res = await request({
        url: "/program/api/getProgramList",
        method: "POST",
        data: {
          command: 10,
          user_name: localStorage.getItem("user_name"),
          data: [
            {
              pl_id: -1,
            },
          ],
        },
      });
      if (res.data.status == 200) {
        this.programList = res.data.data.data;
        console.log(this.programList);
      }
    },
    changePlanType() {
      console.log(this.planForm.type);
    },
    deleteVideoInSelectedVideos(index) {
      this.selectedVideoList[index].selected = false;
      this.selectedVideoList.splice(index, 1);
    },
    checkAllSelect() {
      for (let index = 0; index < this.videoList.length; index++) {
        const element = this.videoList[index];
        if (element.selected == false) {
          this.selectAll = false;
          return;
        }
      }
      this.selectAll = true;
    },
    changeSelect(index) {
      const element = this.videoList[index];
      console.log(index);
      element.selected = !element.selected;
      if (element.selected) {
        this.selectedVideoList.push(element);
      } else {
        for (let index = 0; index < this.selectedVideoList.length; index++) {
          const selectedElement = this.selectedVideoList[index];
          if (selectedElement == element) {
            this.selectedVideoList.splice(index, 1);
            break;
          }
        }
      }

      this.checkAllSelect();
    },
    changeSelectAll() {
      this.selectAll = !this.selectAll;
      if (this.selectAll) {
        for (let index = 0; index < this.videoList.length; index++) {
          const element = this.videoList[index];
          element.selected = true;
          this.selectedVideoList.push(element);
        }
      } else {
        this.selectedVideoList = [];
        for (let index = 0; index < this.videoList.length; index++) {
          const element = this.videoList[index];
          element.selected = false;
        }
      }
    },
  },
  mounted() {
    this.getProgramList();
  },
};
</script>

<style></style>